$(function() {
    var myChart = echarts.init(document.getElementById('echarts1'));
    option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c}万元 ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            y: 'bottom',
            data: ['北京301医院', '中日友好医院', '武警总院', '积水潭医院', '朝阳医院']
        },
        series: [{
            name: '总额占比',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '24',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [{
                value: 690.00,
                name: '北京301医院',
                itemStyle: {
                    normal: {
                        color: "#ff2948" //图标颜色
                    }
                },
            }, {
                value: 106.00,
                name: '中日友好医院',
                itemStyle: {
                    normal: {
                        color: "#ffc900" //图标颜色
                    }
                },
            }, {
                value: 340.00,
                name: '武警总院',
                itemStyle: {
                    normal: {
                        color: "#9ad100" //图标颜色
                    }
                },
            }, {
                value: 340.00,
                name: '积水潭医院',
                itemStyle: {
                    normal: {
                        color: "#00aaeb" //图标颜色
                    }
                },
            }, {
                value: 430.35,
                name: '朝阳医院',
                itemStyle: {
                    normal: {
                        color: "#ff9e3e" //图标颜色
                    }
                },
            }]
        }]
    };
    myChart.setOption(option);

    // 选项卡
    $('.fheader .kcfx_btn a').each(function(index, value) {
        $(value).addClass("a" + index)
    });

    $(".fheader .kcfx_btn a").click(function() {
        $(this).addClass('on').siblings().removeClass('on');

        var index = $(this).index();
        number = index;
        $('.kcfx_echart').addClass('hide');
        $('.kcfx_echart:eq(' + index + ')').removeClass('hide');

        if (index == 1 && isLoadedChart3 == false) {
            showChart3();
        }
    });

    var isLoadedChart3 = false;

    function showChart3() {
        isLoadedChart3 = true;

        var myChart3 = echarts.init(document.getElementById('echarts3'));
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: '{b} <br /> {a} : {c}万元'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                // boundaryGap: [0, 0.01],
                //最小是多少，最大是多少，默认一次增加多少
                min: 0,
                max: 800,
                interval: 100,
                //下面是显示格式化，一般来说还是用的上的
                axisLabel: {
                    formatter: '{value} 万元'
                }
            },
            yAxis: {
                type: 'category',
                data: ['武警医院', '积水潭医院', '朝阳医院', '北京301医院', '中日友好医院']
            },
            series: [{
                name: '库存总额',
                type: 'bar',
                data: [340, 340, 430.35, 690, 106],
                barWidth: 36,
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight',
                        formatter: '{c}万元'
                    },
                },
                itemStyle: {
                    normal: {
                        color: function(params) {
                            // build a color map as your need.
                            var colorList = [
                                '#9bd100', '#00aaeb', '#ff9e3e', '#ff2849', '#ffc900'
                            ];
                            return colorList[params.dataIndex]
                        }
                    }
                },
            }]
        };
        myChart3.setOption(option);
    };

    var myChart2 = echarts.init(document.getElementById('echarts2'));
    option = {
        tooltip: {
            trigger: 'axis',
            // formatter: '{c}元',
            // borderRadius: 8,
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'line' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: ['北京301医院', '中日友好医院', '武警总院', '积水潭医院', '朝阳医院']
        },
        grid: {
            left: '0',
            right: '0',
            bottom: '0',
            containLabel: true,
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        yAxis: {
            type: 'value',
            //最小是多少，最大是多少，默认一次增加多少
            // min: 0,
            // max: 1000,
            // interval: 200,
            //下面是显示格式化，一般来说还是用的上的
            axisLabel: {
                formatter: '{value} 万元'
            }
        },
        xAxis: {
            type: 'category',
            // boundaryGap: false,
            data: ['09-01', '09-02', '09-03', '09-04', '09-05', '09-06', '09-07', '09-08', '09-09', '09-10', '09-11', '09-12']
        },
        series: [{
            name: '北京301医院',
            type: 'line',
            stack: '总量',
            symbolSize: 10, //图标尺寸
            symbol: 'circle',
            data: [100, 110, 116, 125, 132, 139, 230, 240, 190, 340, 240, 200],
            itemStyle: {
                normal: {
                    color: "#ff2948" //图标颜色
                }
            },
            lineStyle: {
                normal: {
                    color: "#ff2948" //连线颜色
                }
            },
        }, {
            name: '中日友好医院',
            type: 'line',
            stack: '总量',
            symbolSize: 10, //图标尺寸
            symbol: 'circle',
            data: [90, 100, 106, 115, 122, 129, 220, 230, 180, 330, 230, 190],
            itemStyle: {
                normal: {
                    color: "#ffc900" //图标颜色
                }
            },
            lineStyle: {
                normal: {
                    color: "#ffc900" //连线颜色
                }
            },
        }, {
            name: '武警总院',
            type: 'line',
            stack: '总量',
            symbolSize: 10, //图标尺寸
            symbol: 'circle',
            data: [80, 90, 96, 105, 112, 119, 210, 220, 170, 320, 220, 180],
            itemStyle: {
                normal: {
                    color: "#9ad100" //图标颜色
                }
            },
            lineStyle: {
                normal: {
                    color: "#9ad100" //连线颜色
                }
            },
        }, {
            name: '积水潭医院',
            type: 'line',
            stack: '总量',
            symbolSize: 10, //图标尺寸
            symbol: 'circle',
            data: [70, 80, 86, 95, 102, 109, 200, 210, 160, 310, 210, 170],
            itemStyle: {
                normal: {
                    color: "#00aaeb" //图标颜色
                }
            },
            lineStyle: {
                normal: {
                    color: "#00aaeb" //连线颜色
                }
            },
        }, {
            name: '朝阳医院',
            type: 'line',
            stack: '总量',
            symbolSize: 10, //图标尺寸
            symbol: 'circle',
            data: [60, 70, 76, 85, 92, 99, 190, 200, 150, 300, 200, 160],
            itemStyle: {
                normal: {
                    color: "#ff9e3e" //图标颜色
                }
            },
            lineStyle: {
                normal: {
                    color: "#ff9e3e" //连线颜色
                }
            },
        }]
    };
    myChart2.setOption(option);
})